<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <title>Document</title>
</head>
<style>
    .box{
        width: 800px;
        margin: 0 auto;
    }
    .fl{
        float: left;
    }
    .fr{
        float: right;
    }
    .title{
        text-align: center;
        padding: 30px;
        box-sizing: border-box;
        font-size: 30px;
        font-weight: bolder;
    }
    .section{
        border-bottom: 1px solid #EEEEEE ;
    }
    .banner{
        height: 80px;
        line-height: 80px;
        padding: 0 10px;
        box-sizing: border-box;
        font-size: 20px;
        font-weight: bolder;
        border
    }
    .banner{
        border-top: 1px solid #EEEEEE ;
    }
    .box-a{
        width: 80px;
        height: 40px;
        background: #F7F7F7;
        margin-top: 20px ;
        border: 3px solid #E5E5E5;
        border-radius: 25px;
    }
    .box-b{
        width: 80px;
        height: 40px;
        background: #07C160;
        margin-top: 20px ;
        border: 3px solid #E5E5E5;
        border-radius: 25px;
    }
    .button{
        height: 40px;
        width: 40px;
        border-radius: 50%;
        background: #fff;
        box-shadow: 0 1px 3px rgba(0,0,0,0.4);
    }
    .button1{
        height: 40px;
        width: 40px;
        border-radius: 50%;
        background: #fff;
        box-shadow: 0 2px 5px rgb(7,193,96);
    }
</style>
<body>
    <a href="title.html">作业一</a>
    <a href="home.html">作业二</a>
    <a href="test.html">作业三</a>
    <a href="demo.html">作业四</a>
    <div class="box">
        <div class="title">
            开关样式展示
        </div>
        <div class="section">
            <div class="banner">
                <div class="banner1 fl">标题文字</div>
                <div class=" box-a fr" id="a">
                    <div class="button" id="p" onclick='btn()'></div>
                </div>
            </div>
            <div class="banner">
                <div  class=" fl banner2">兼容IE Edge的版本 <div class="class"></div> </div>
                <div class="box-b fr">
                    <div class="button1 fr" ></div>
                </div>
            </div>
        </div>

    </div>
</body>
<script> 

    function btn (){
        p.style.transform='translate(100%, 0%)';
        p.style.transition= 'transform 1s';
        a.style.background ="#07C160";
        a.style.transition= 'background 2s';
    }
    document.onmousedown = function (){
        p.style.transform='translate(0%, 0%)';
        p.style.transition= 'transform 1s';
        a.style.background ="#fff";
        a.style.transition= 'background 2s';
    }

</script>
</html>